@extends('layout.layout')
@section('title','首页')
@section('content')
    <style>
        #qr-code-container {
            display: none;
            position: absolute;
            top: 50px;
            left: 100%;
            margin-left: 10px;
        }
    </style>
    <div class="main">
    <div class="past_top clearfix">
        <div class="past_left">
            <div class="past_left_title">{{$infos->title}}</div>

            <div class="past_left_video" id="plat">
                <video width="640" height="360" controls autoplay>
                    <source src={{$infos->video}}>
                </video>
            </div>
            <div class="online_class_share">
                <span>分享到：</span>
                <a href="#" id="qr-code-trigger"><img src="/upload/video_thumb/icon_weixin.jpg" /></a>
                <div id="qr-code-container">
                    <img src="/path/to/qr-code.png" alt="QR Code">
                </div>
            </div>
        </div>
        <div class="past_right" style="width: 200px">
            <div class="past_intro">
                <div class="title_box">本期简介</div>
                <div class="past_intro_body">
                    <p>{{$infos->title}}</p>
                    <img src="{{$infos->thumb}}" style="width: 200px; height: auto;">
                </div>
            </div>
            <div class="past_other">
                <div class="past_other_title">其他讲堂</div>
                <div class="past_other_list">
                    <div class="past_other_ship">
                        @foreach($video as $v)
                            <p>
                                <a href="/review/info/{{$v->id}}">
                                    <span>{{$v->title}}<br></span>
                                    <img src="{{$v->thumb}}" style="width: 200px; height: auto;"/>
                                </a>
                                <br><br>
                            </p>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="past_export">
            <div class="title_box">本期嘉宾</div>
            <div class="export_this_list">
                <div class="export_this_ship clearfix">
                    @foreach($infos->experts as $expert)
                        <div class="export_this_ship_item" style="display: flex; align-items: flex-start;">
                            <img src="/res/test_images/e1.jpg" alt="{{$expert->name}}" style="width: 80px; height: 80px; margin-right: 20px;">
                            <div class="export_this_ship_info" style="flex-grow: 1;">
                                <h3><a href="{{ url('/expert/info/' . $expert->id) }}">{{$expert->name}}</a></h3>
                                <p><b>科室：</b>{{$expert->department}}</p>
                                <p><b>职称：</b>{{$expert->chenghao}}</p>
                                <p>{{$expert->title}}</p>
                                <p>{{$expert->description}}</p>
                                <div style="width: 650px">个人简介：{{$expert->introduction}}</div>
                                <div style="width: 650px">接受教育：{{$expert->education}}</div>

                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var flashvars={
        f:  '/upload/videos/test2.mp4',
        c:0,
        p:2,
        b:1,
        // loaded:'loadedHandler'
    };
    var qrCodeTrigger = document.getElementById('qr-code-trigger');
    var qrCodeContainer = document.getElementById('qr-code-container');

    qrCodeTrigger.addEventListener('mouseover', function() {
        qrCodeContainer.style.display = 'block';
    });

    qrCodeTrigger.addEventListener('mouseout', function() {
        qrCodeContainer.style.display = 'none';
    });
</script>
@endsection

